﻿@using DotNetClub.Web.ViewModels.Topic
@using DotNetClub.Core
@inject ClientManager clientManager
@model IndexViewModel

@section Header{    
    <link href="~/lib/editor.md/css/editormd.min.css" rel="stylesheet" />
    <script src="~/lib/editor.md/editormd.min.js"></script>
}

<div class="col-md-9">
    <div class="panel panel-default">
        <div class="panel-body">
            <h4>
                <strong>@Model.Topic.Title</strong>

                <span class="pull-right" condition="clientManager.IsLogin">
                    <a condition="!Model.IsCollected" asp-action="Collect" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success">收藏主题</a>
                    <a condition="Model.IsCollected" asp-action="Collect" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-warning">取消收藏主题</a>
                </span>
            </h4>
            <div class="text-muted">
                <ul class="list-inline text-muted" style="font-size:12px;">
                    <li>发布于: <datetime date="@Model.Topic.CreateDate"></datetime></li>
                    <li>作者: <a asp-action="Index" asp-controller="User" asp-route-userName="@Model.Topic.CreateUser.UserName">@Model.Topic.CreateUser.UserName</a></li>
                    <li>@Model.Topic.VisitCount 次浏览</li>
                    <li>来自: @Model.Topic.CategoryModel.Name</li>
                </ul>
            </div>

            <div condition="Model.CanOperate">
                <a asp-action="Edit" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="编辑主题"><i class="fa fa-lg fa-edit"></i> 编辑</a>

                <a asp-action="Delete" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-danger btn-xs" title="删除主题" onclick="return confirm('确认删除此主题吗?')"><i class="fa fa-lg fa-edit"></i> 删除</a>

                <visible condition="@clientManager.IsAdmin">
                    <a condition="!Model.Topic.Lock" asp-action="Lock" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="锁定">
                        <i class="fa fa-lock"></i>
                        锁定
                    </a>

                    <a condition="Model.Topic.Lock" asp-action="Lock" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-warning btn-xs" title="解除锁定">
                        <i class="fa fa-unlock-alt"></i>
                        解除锁定
                    </a>

                    <a condition="!Model.Topic.Top" asp-action="Top" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="置顶"><i class="fa fa-lg fa-star-o"></i> 置顶</a>

                    <a condition="Model.Topic.Top" asp-action="Top" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success btn-xs" title="取消置顶"><i class="fa fa-lg fa-star"></i> 取消置顶</a>

                    <a condition="!Model.Topic.Recommand" asp-action="Recommand" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-default btn-xs" title="加精华"><i class="fa fa-lg fa-heart-o"></i> 添加精华</a>

                    <a condition="Model.Topic.Recommand" asp-action="Recommand" asp-controller="Topic" asp-route-id="@Model.Topic.ID" class="btn btn-success btn-xs" title="取消精华"><i class="fa fa-lg fa-heart"></i> 取消精华</a>
                </visible>
            </div>

            <hr />

            <div>
                <markdown content="@Model.Topic.Content"></markdown>
            </div>
        </div>
    </div>

    <visible condition="Model.CommentList.Count > 0">
        <div class="panel panel-default">
            <div class="panel-heading">
                @Model.CommentList.Count 回复
            </div>
            <div class="panel-body noPadding">
                @foreach (var comment in Model.CommentList)
                {
                    <div class="cell" id="@($"comment{comment.Entity.ID}")">
                        <div>
                            <useravatar email="@comment.Entity.CreateUser.Email" size="28" class="pull-left"></useravatar>
                            <a class="user-info" asp-action="Index" asp-controller="User" asp-route-userName="@comment.Entity.CreateUser.UserName">@comment.Entity.CreateUser.UserName</a>
                            <small class="reply-date text-muted"><datetime date="@comment.Entity.CreateDate"></datetime></small>

                            <span class="pull-right">
                                <span class="vote">
                                    <a href="javascript:void(0)" class="vote-btn @(comment.Voted ? "text-danger" : "text-muted")" comment-id="@comment.Entity.ID">
                                        <i class="fa fa-thumbs-o-up"></i>
                                    </a>
                                    <small>@comment.Entity.Ups</small>
                                </span>

                                <visible condition="comment.CanOperate">
                                    <a asp-action="Edit" asp-controller="Comment" asp-route-id="@comment.Entity.ID" class="text-muted" title="编辑"><i class="fa fa-pencil-square-o"></i></a>
                                    <a asp-action="Delete" asp-controller="Comment" asp-route-id="@comment.Entity.ID" class="text-muted" title="删除" onclick="return confirm('确定要删除此回复吗?')"><i class="fa fa-trash-o"></i></a>
                                </visible>

                                <visible condition="clientManager.IsLogin && !Model.Topic.Lock">
                                    <a href="javascript:void(0)" class="text-muted" onclick="replyTo('@comment.Entity.ID')"><i class="fa fa-reply"></i></a>
                                </visible>
                            </span>
                        </div>
                        <div class="reply-content">
                            <markdown content="@comment.Entity.Content"></markdown>
                        </div>
                        <div class="reply-to">

                        </div>
                    </div>

                    <div id="latest" condition="Model.CommentList.IndexOf(comment) == Model.CommentList.Count - 1"></div>
                }
            </div>
        </div>
    </visible>

    <visible condition="clientManager.IsLogin">
        <div class="panel panel-default" id="replyPanel">
            <div class="panel-heading">添加回复</div>
            <div class="panel-body">
                <form id="frmComment" method="post" asp-action="Add" asp-controller="Comment" asp-antiforgery="true">
                    <input type="hidden" name="TopicID" value="@Model.Topic.ID" />
                    <input type="hidden" name="ReplyTo" id="hdnReplyTo" value="" />
                    <div class="form-group">
                        <div id="editor">
                            <textarea class="form-control" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary" condition="!Model.Topic.Lock">提交</button>
                        <button type="button" class="btn btn-warning" disabled condition="Model.Topic.Lock">
                            <i class="fa fa-lock"></i>
                            该主题已被锁定
                        </button>
                        <button type="button" class="btn btn-default" id="btnCancelReplyTo" onclick="cancelReplyTo()" style="display:none;">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <script type="text/javascript">
        var editor = editormd("editor", {
            name: "Content",
            width: "100%",
            height: 200,
            syncScrolling: "single",
            autoFocus: false,
            path: "/lib/editor.md/lib/",
            toolbarIcons: function () {
                return ["bold", "italic", "|", "quote", "list-ul", "list-ol", "|", "link", "image", "|", "preview"]
            },
            placeholder: "",
            watch: false
        });

        function replyTo(id) {
            var container = $("#comment" + id).find("div.reply-to");
            $("#frmComment").appendTo(container);

            editor.focus();

            var userName = $("#comment" + id).find("a.user-info").text();
            var markdown = editor.getValue();
            if (markdown == "") {
                markdown = "@@" + userName + " ";
            }
            else {
                markdown = "@@" + userName + "\r\n" + markdown;
            }
            editor.setValue(markdown);

            $("#replyPanel").hide();
            $("#btnCancelReplyTo").show();
            $("#hdnReplyTo").val(id);
        }

        function cancelReplyTo() {
            var container = $("#replyPanel").find("div.panel-body");
            $("#frmComment").appendTo(container);

            $("#replyPanel").show();
            $("#btnCancelReplyTo").hide();
            $("#hdnReplyTo").val("");
        }
        </script>
    </visible>

    <script type="text/javascript">
        $("a.vote-btn").click(function () {
            var self = $(this);
            var id = $(this).attr("comment-id");

            self.blur();

            $.ajax({
                url: "/comment/" + id + "/vote",
                type: "POST",
                dataType: "text"
            }).done(function (text) {
                if (text == "login") {
                    alert("请先登录");
                }
                else if (text == "true") {
                    self.addClass("text-danger");
                    self.next("small").text(parseInt(self.next("small").text()) + 1)
                }
                else if (text == "false") {
                    self.removeClass("text-danger");
                    self.next("small").text(parseInt(self.next("small").text()) - 1)
                }
                else {
                    alert(text);
                }
            }).fail(function () {
                alert("服务器发生错误");
            })
        });
    </script>
</div>

<div class="col-md-3">
    @await Component.InvokeAsync("UserInfoPanel", new { user = Model.Topic.CreateUser })

    @await Component.InvokeAsync("UserOtherTopicsPanel", new { userID = Model.Topic.CreateUserID, count = 10, exclude = new int[] { Model.Topic.ID } })

    @await Component.InvokeAsync("NoCommentsTopicPanel", new { count = 10 })
</div>